<template>
  <div style="width: 100%; height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%; background-color: #fff">
      <!-- 晒选区域 -->
      <div style="width: 100%; padding: 10px">
        <!-- <el-col :span="14" style="padding: 10px"> -->
        <el-row :gutter="10">
          <el-col :span="3">
            <el-select
              size="small"
              style="width: 100%"
              class="area"
              v-model="dataObj.areaId"
              @change="roomChange('areaId')"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in schoolList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 30px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                校区:
              </div>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="small"
              style="width: 100%"
              class="area"
              v-model="dataObj.buildingId"
              @change="roomChange('buildingId')"
              placeholder="请选择楼宇"
              filterable
            >
              <el-option
                v-for="(item, index) in buildingAuthList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 30px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                楼宇:
              </div>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="small"
              class="area"
              style="width: 100%"
              v-model="dataObj.collegeId"
              @change="roomChange('collegeId')"
              placeholder="请选择学院"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in collegeList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 30px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                学院:
              </div>
            </el-select>
          </el-col>
          <el-col :span="3"
            ><el-select
              size="small"
              v-model="dataObj.stayStatus"
              @change="roomChange('stayStatus')"
              class="area"
              style="width: 100%"
              placeholder="请选择状态"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in roomInStatusList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 30px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                状态:
              </div>
            </el-select>
          </el-col>
          <el-col :span="3"
            ><el-select
              size="small"
              v-model="dataObj.sex"
              @change="roomChange('sex')"
              class="area"
              style="width: 100%"
              placeholder="请选择性别"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in sexList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 30px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                性别:
              </div>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-select
              v-model="dataObj.trainingLevel"
              @change="roomChange('trainingLevel')"
              class="houseType"
              placeholder="请选择培养层次"
              clearable
              size="small"
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in trainingLevelList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 60px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                培养层次:
              </div>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="small"
              style="width: 100%"
              class="area"
              v-model="dataObj.grade"
              @change="roomChange('grade')"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in gradeList"
                :key="index"
                :label="item.grade"
                :value="item.grade"
              ></el-option>
              <div
                slot="prefix"
                style="
                  font-size: 12px;
                  line-height: 32px;
                  float: left;
                  width: 30px;
                  font-weight: normal;
                  margin-right: 20px;
                  color: #909399;
                "
              >
                年级:
              </div>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        highlight-current-row
        tooltip-effect="light"
        height="100%"
        style="width: 100%; margin-top: 6px; padding: 0 3px"
        ref="dataListTable"
        @row-dblclick="tableDbEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <!-- <el-table-column prop label width="120" align="center">
          <template slot-scope="scope"></template>
        </el-table-column>-->
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="type" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">空闲中</span>
            <span v-if="scope.row.status == 1">已租赁</span>
          </template>
        </el-table-column> -->
        <el-table-column
          v-for="col in columns.filter((item) => item.visible)"
          :prop="col.prop"
          :label="col.label"
          :sortable="col.sortable"
          :resizable="col.resizable"
          :type="col.type"
          :show-overflow-tooltip="col.tooltip"
          :align="col.align"
          :width="col.width"
          :fixed="col.fixed"
          :key="col.prop"
        />
        <!-- <el-table-column
          label="租赁期限"
          width="250"
          align="left"
          show-overflow-tooltip=""
        >
          <template slot-scope="scope">
            <span>{{ scope.row.startDate }}</span
            >-
            <span>{{ scope.row.endDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="租户类型"
          prop="typeName"
          align="center"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="查看" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handClick(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-footer
        style="height: 50px; background-color: #fff; line-height: 30px"
        class="page-footer"
      >
        <el-pagination
          style="padding-top: 10px; background-color: #fff"
          background
          layout="prev, pager, next,jumper,total,sizes"
          @size-change="evtPageSizeChange"
          @current-change="evtPageCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100, 500]"
          :total="totalRows"
        ></el-pagination>
      </el-footer>
    </el-container>
    <editInfo ref="editInfo" @funLoadList="funLoadList"></editInfo>
    <checkOut
      ref="checkOut"
      @closeDia="closeDia"
      @clearSet="clearSet"
    ></checkOut>
  </div>
</template>
<script>
import toolButton from "@/itsoftUI/components/toolbar/toolbutton";
import { getPremission } from "@/itsoftUI/auth/permission";
import { apiIndex } from "@/api/accommodation/index";
import { apiBuilding } from "@/api/basicData/building";
import { apiDepartments } from "@/api/basicData/departments";
import { apiClassInfo } from "@/api/basicData/classInfo";
import { apiTrainingLevel } from "@/api/basicData/trainingLevel";
import { apiProfessional } from "@/api/basicData/professional";
import { apiStudentInfo } from "@/api/basicData/studentInfo";
import editInfo from "@/views/accommodation/home/editInfo";
import checkOut from "@/views/accommodation/home/checkOut";
export default {
  components: {
    toolButton,
    editInfo,
    checkOut,
  },
  props: {
    currentRows: {
      //朴素
      type: [Object, Array],
      default: () => {},
    },
  },
  data() {
    return {
      areaList: [],
      areaName: "",
      schoolId: "",
      schoolList: [],
      searchVal: "",
      buildingAuthList: [],
      collegeId: "",
      collegeList: [],
      tableData: [],
      roomInStatusList: [
        { id: 1, name: "住宿中" },
        { id: 0, name: "空床位" },
      ],
      sexList: [
        { id: 0, name: "女" },
        { id: 1, name: "男" },
      ],
      trainingLevelList: [],
      gradeList: [], //年级
      dataObj: {
        areaId: "",
        grade: "",
        buildingId: "",
        stayStatus: "",
        trainingLevel: "",
        collegeId: "",
        sex: "",
      },
      multipleSelection: [],
      searchVal: "",
      loading: false,
      toolButtons: [
        {
          text: "添加验房",
          icon: "add",
          auth: "040301",
        },
        {
          text: "编辑",
          icon: "edit",
          auth: "040302",
        },
        {
          text: "删除",
          icon: "delete",
          auth: "040303",
        },
      ],
      columns: [
        {
          prop: "areaName",
          label: "校区",
          sortable: false,
          align: "left",
          visible: true,
          tooltip: true,
          max: 100,
        },
        {
          prop: "buildingName",
          label: "楼宇",
          align: "center",
          sortable: true,
          visible: true,
          tooltip: true,
          max: 100,
          width: 150,
        },
        {
          prop: "floor",
          label: "楼层",
          sortable: true,
          align: "center",
          visible: true,
          tooltip: true,
          max: 100,
          width: 80,
        },
        {
          prop: "roomName",
          label: "房间号",
          sortable: true,
          align: "center",
          visible: true,
          tooltip: true,
          max: 100,
          width: 100,
        },
        {
          prop: "bedName",
          label: "床位",
          sortable: true,
          visible: true,
          align: "center",
          tooltip: true,
          max: 100,
          width: 120,
        },
        {
          prop: "studentName",
          label: "住宿学生姓名",
          sortable: false,
          visible: true,
          align: "center",
          tooltip: true,
          max: 100,
          width: 120,
        },
        {
          prop: "account",
          label: "学号",
          sortable: false,
          visible: true,
          align: "center",
          tooltip: true,
          max: 100,
          width: 150,
        },
        {
          prop: "sexName",
          label: "性别",
          sortable: false,
          visible: true,
          align: "center",
          tooltip: true,
          width: 60,
          max: 100,
        },
        {
          prop: "trainingLevelName",
          label: "培养层次",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 120,
          max: 100,
        },
        {
          prop: "grade",
          label: "年级",
          sortable: false,
          visible: true,
          align: "center",
          tooltip: true,
          width: 100,
          max: 100,
        },
        {
          prop: "collegeName",
          label: "学院",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 180,
          max: 100,
        },
        {
          prop: "majorName",
          label: "专业",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 140,
          max: 100,
        },
        {
          prop: "className",
          label: "班级",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 140,
          max: 100,
        },
        {
          prop: "price",
          label: "床位费用",
          sortable: false,
          visible: true,
          align: "left",
          tooltip: true,
          width: 100,
          max: 100,
        },
      ],
      currentRow: null,
      currentPage: 1,
      totalRows: 0,
      pageSize: 20,
    };
  },
  methods: {
    roomChange(text) {
      switch (text) {
        case "areaId":
          this.Change();
          this.dataObj.buildingId = "";
          this.getBuilding();
          this.funLoadList();
          break;
        case "buildingId":
          this.Change();
          this.funLoadList();

          break;
        case "collegeId":
          this.Change();
          this.funLoadList();
          break;

        case "stayStatus":
          this.Change();
          this.funLoadList();

          break;
        case "sex":
          this.Change();
          this.funLoadList();

          break;
        case "trainingLevel":
          this.Change();

          this.funLoadList();

          break;
        case "grade":
          this.Change();
          this.funLoadList();

          break;
      }
    },
    closeDia() {
      this.funLoadList();
    },
    clearSet() {
      this.$refs.dataListTable.clearSelection();
    },
    funcheckOut() {
      if (this.multipleSelection.length == "0") {
        this.$message.error("请选择需要退宿的数据");
        return false;
      }
      let bedsIdList = [];
      let studentIdList = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        bedsIdList.push(this.multipleSelection[i].bedsId);
        studentIdList.push(
          (this.multipleSelection[i].studentId =
            this.multipleSelection[i].studentId == null
              ? "无"
              : this.multipleSelection[i].studentId)
        );
      }
      let flag = studentIdList.some((r) => {
        return r == "无";
      });
      if (flag) {
        this.$message.error(
          "所选的数据中存在没有学生的床位无法进行退宿,请从新选择"
        );
        this.$refs.dataListTable.clearSelection();
        return false;
      }
      var bedsId = bedsIdList.join(",");
      var studentId = studentIdList.join(",");
      this.$refs.checkOut.FormVisible = true;
      this.$refs.checkOut.formData.bedsId = bedsId;
      this.$refs.checkOut.formData.studentId = studentId;
    },
    // 筛选-列表
    Change() {
      this.condition = [];
      for (var item in this.dataObj) {
        if (this.dataObj[item] !== "") {
          this.condition.push({
            andOr: "and",
            searchField: item,
            operator: "=",
            searchValue: this.dataObj[item],
          });
        }
      }
    },
    //获取年级列表
    funGradeList() {
      apiClassInfo.GradeList().then((res) => {
        this.gradeList = res.data;
      });
    },
    //获取房间信息
    funLoadList() {
      this.loading = true;
      let page = {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      };
      apiIndex
        .List(JSON.stringify(page), JSON.stringify(this.condition))
        .then((res) => {
          if (res.status == "success") {
            this.tableData = res.data.rows;
            this.totalRows = res.data.total;
            this.tableData.forEach((r) => {
              r.sexName = r.sex == 0 ? "女" : "男";
            });
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //获取校区
    funLoadAreaList() {
      apiIndex.AreaList().then((res) => {
        this.schoolList = res.data;
        this.getBuilding();
      });
    },
    getBuilding() {
      let search = [];
      search = [
        {
          andOr: "and",
          searchField: "areaId",
          operator: "=",
          searchValue: this.dataObj.areaId,
        },
      ];
      apiBuilding.List(JSON.stringify(search)).then((res) => {
        if (res.errorCode === 0) {
          this.buildingAuthList = res.data;
        }
      });
    },
    //院系
    funcollegeList() {
      apiDepartments.List().then((res) => {
        if (res.status == "success") {
          this.collegeList = res.data;
        }
      });
    },
    //培养层次
    funtrainingLevel() {
      apiTrainingLevel.List().then((res) => {
        this.trainingLevelList = res.data;
      });
    },

    //选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.funLoadList();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.funLoadList();
    },
    handClick(item) {
      this.tableDbEdit(item);
    },
    //双击
    tableDbEdit(item) {
      if (item.studentId == null) {
        this.$refs.editInfo.FormVisible = true;
        this.$refs.editInfo.formData = JSON.parse(JSON.stringify(item));
        this.$refs.editInfo.studentId = item.studentId;
        this.$refs.editInfo.bedsId = item.bedsId;
        this.$refs.editInfo.type = 1;
      } else {
        this.$refs.editInfo.FormVisible = true;
        this.$refs.editInfo.loading = true;
        this.$refs.editInfo.studentId = item.studentId;
        this.$refs.editInfo.type = 2;
        apiStudentInfo.Get(item.studentId).then((res) => {
          this.$refs.editInfo.formData = res.data;
          this.$refs.editInfo.bedsId = res.data.bedsId;
          let condition = [];
          let condition1 = [];
          condition = [
            {
              andOr: "and",
              searchField: "collegeId",
              operator: "=",
              searchValue: res.data.collegeId,
            },
          ];

          apiProfessional.List(JSON.stringify(condition)).then((res) => {
            if (res.status == "success") {
              this.$refs.editInfo.majorList = res.data;
            }
          });
          condition1 = [
            {
              andOr: "and",
              searchField: "majorId",
              operator: "=",
              searchValue: res.data.majorId,
            },
          ];

          apiClassInfo.List(JSON.stringify(condition1)).then((res) => {
            if (res.status == "success") {
              this.$refs.editInfo.classList = res.data;
            }
          });
          this.$refs.editInfo.loading = false;
        });
      }
    },
  },
  created() {
    //功能权限
    getPremission(this.toolButtons);
    this.dataObj.areaId = this.$route.query.areaId;
    this.dataObj.buildingId = this.$route.query.buildingId;
    this.Change();
    this.funLoadAreaList();
    this.funcollegeList();
    this.funLoadList();
    this.funtrainingLevel();
    this.funGradeList();
  },
};
</script>

<style lang="scss" scoped>
.activeClass {
  background: #dae9ff;
  color: #3a84ef !important;
}
.workspace {
  ::v-deep .el-tabs__nav-wrap::after {
    width: 1px;
  }
  .content {
    &:hover {
    }
  }
  .area {
    ::v-deep .el-input__inner {
      padding-left: 40px !important;
    }
  }
  .houseType {
    ::v-deep .el-input__inner {
      padding-left: 65px !important;
    }
  }
}
</style>
